<!-- 右侧面板：事件模块 -->
<template>
    <div class="actions-panel">
        <a-collapse v-model:activeKey="data.actionsActiveKey">

            <!-- 组件事件 -->
            <template v-if="selectItem != undefined && getSelectItemEvent()">
                <a-collapse-panel :key="1" :header="selectItem.name + '事件'">
                    <ul class="event-list">
                        <li v-for="item in getSelectItemEvent()">
                            <div class="event-list-item">
                                <div>
                                    <span class="event-list-item-name">{{ item.name }}</span>
                                    <a-tooltip placement="bottom">
                                        <template #title>
                                            <span class="small-text">{{ item.desc }}</span>
                                        </template>
                                        <span class="event-list-item-desc">
                                            <QuestionCircleOutlined />
                                        </span>
                                    </a-tooltip>
                                </div>
                                <PlusOutlined class="add-icon" @click="addEvent(item)" />
                            </div>

                            <template v-if="selectItem.event != undefined">
                                <template v-for="(value,key,index) in selectItem.event">
                                    <div class="item-method-list-wrap" v-if="key == item.type">
                                        <ul class="item-method-list">
                                            <li v-for="(methodItem,index) in value" :key="index">
                                                <div class="method-list-item">
                                                    <span class="method-name"
                                                        :title="methodItem.methodName">{{methodItem.methodName}}</span>
                                                    <div class="method-item-action">
                                                        <FormOutlined class="action-btn"
                                                            @click="editItemMethod(item,methodItem)" title="编辑" />
                                                        <a-popconfirm title="确定要删除这个函数吗？" placement="topRight"
                                                            ok-text="确定" cancel-text="取消"
                                                            @confirm="deleteItemMethod(item,methodItem)"
                                                            @cancel="cancel">
                                                            <DeleteOutlined class="action-btn" title="删除" />
                                                        </a-popconfirm>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </template>
                            </template>

                        </li>
                    </ul>
                </a-collapse-panel>
            </template>

            <a-collapse-panel :key="2" header="生命周期">
                <ul class="event-list">
                    <li v-for="item in data.eventListData">
                        <div class="event-list-item">
                            <div>
                                <span class="event-list-item-name">{{ item.name }}</span>
                                <a-tooltip placement="bottom">
                                    <template #title>
                                        <span class="small-text">{{ item.desc }}</span>
                                    </template>
                                    <span class="event-list-item-desc">
                                        <QuestionCircleOutlined />
                                    </span>
                                </a-tooltip>
                            </div>
                            <PlusOutlined class="add-icon" @click="addEvent(item)" />
                        </div>

                        <template v-if="selectItem">
                            <template v-for="(value,key,index) in selectItem.event">
                                <div class="item-method-list-wrap" v-if="key == item.type">
                                    <ul class="item-method-list">
                                        <li v-for="(methodItem,index) in value" :key="index">
                                            <div class="method-list-item">
                                                <span class="method-name"
                                                    :title="methodItem.methodName">{{methodItem.methodName}}</span>
                                                <div class="method-item-action">
                                                    <FormOutlined class="action-btn"
                                                        @click="editItemMethod(item,methodItem)" title="编辑" />
                                                    <a-popconfirm title="确定要删除这个函数吗？" placement="topRight" ok-text="确定"
                                                        cancel-text="取消" @confirm="deleteItemMethod(item,methodItem)"
                                                        @cancel="cancel">
                                                        <DeleteOutlined class="action-btn" title="删除" />
                                                    </a-popconfirm>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </template>

                        <template v-else>
                            <template v-for="(value,key,index) in generateData.data.event">
                                <div class="item-method-list-wrap" v-if="key == item.type">
                                    <ul class="item-method-list">
                                        <li v-for="(methodItem,index) in value" :key="index">
                                            <div class="method-list-item">
                                                <span class="method-name"
                                                    :title="methodItem.methodName">{{methodItem.methodName}}</span>
                                                <div class="method-item-action">
                                                    <FormOutlined class="action-btn"
                                                        @click="editItemMethod(item,methodItem)" title="编辑" />
                                                    <a-popconfirm title="确定要删除这个函数吗？" placement="topRight" ok-text="确定"
                                                        cancel-text="取消" @confirm="deleteItemMethod(item,methodItem)"
                                                        @cancel="cancel">
                                                        <DeleteOutlined class="action-btn" title="删除" />
                                                    </a-popconfirm>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </template>
                        </template>

                    </li>
                </ul>
            </a-collapse-panel>
        </a-collapse>
        <scriptEditorModal ref="scriptEditor" :selectItem="selectItem"></scriptEditorModal>
    </div>
</template>

<script setup>
import { ref, defineProps, reactive } from 'vue'
import scriptEditorModal from '../modal/scriptEditorModal.vue'
import { getComponentInstance } from '../../componentManager.js'
import { revoke } from '../../common/util/revoke.js'
import { generateData } from '../../pageManager.js'
import { message } from 'ant-design-vue';

const scriptEditor = ref(null);

const props = defineProps({
    selectItem: {
        type: Object,
        required: false
    },
})

const data = reactive({
    actionsActiveKey: ['1'],
    eventListData: [
        {
            name: 'onBeforeMount',
            type: 'onBeforeMount',
            desc: '挂载DOM前触发',
            default: '无',
            params: '无',
        },
        {
            name: 'onMounted',
            type: 'onMounted',
            desc: '挂载DOM后触发',
            default: '无',
            params: '无',
        },
        {
            name: 'onBeforeUpdate',
            type: 'onBeforeUpdate',
            desc: '更新组件前触发',
            default: '无',
            params: '无',
        },
        {
            name: 'onUpdated',
            type: 'onUpdated',
            desc: '更新组件后触发',
            default: '无',
            params: '无',
        },
        {
            name: 'onBeforeUnmount',
            type: 'onBeforeUnmount',
            desc: '卸载组件前触发',
            default: '无',
            params: '无',
        },
        {
            name: 'onUnmounted',
            type: 'onUnmounted',
            desc: '卸载组件后触发',
            default: '无',
            params: '无',
        },
        // {
        //     name: "onErrorCaptured",
        //     type: 'onErrorCaptured',
        //     desc: '捕获组件错误时触发',
        //     default: '无',
        //     params: '无',
        // }
    ]
})

/**
 * 
 */

/**
 * @method
 * @desc 获取当前选择组件的事件
 * @returns {Object} 当前选择组件的事件
 */
const getSelectItemEvent = () => {
    if (props.selectItem != undefined) {
        let instance = getComponentInstance(props.selectItem.type);
        // console.log(instance);
        return instance.event;
    }
}

/**
 * @method
 * @param {Object} eventItem 需要添加的事件
 * @desc 添加事件
 */
const addEvent = (eventItem) => {
    // console.log('addEvent')
    // console.log("当前selectItem", props.selectItem)
    let selectItem;
    if (props.selectItem) {
        selectItem = props.selectItem;
    } else {
        selectItem = generateData.data;
    }
    scriptEditor.value.open(selectItem, eventItem, 'add');
}

/**
 * @method
 * @param {Object} item 事件对象
 * @param {Object} methodItem 方法对象
 * @desc 删除当前组件的对应事件的函数
 */
const deleteItemMethod = (item, methodItem) => {

    let eventType = item.type;   // 事件类型
    let methodName = methodItem.methodName;  // 函数名称

    let selectItem;
    if (props.selectItem) {
        selectItem = props.selectItem;
    } else {
        selectItem = generateData.data;
    }

    let methodList = selectItem.event[eventType];
    for (let i = 0; i < methodList.length; i++) {
        let methodEl = methodList[i];
        if (methodEl.methodName == methodName) {
            methodList.splice(i, 1);
        }
    }
    if (methodList.length == 0) {
        delete selectItem.event[eventType]
    }
    message.success(`已删除【${selectItem.name}】${item.type}事件中绑定的${methodItem.methodName}函数`);

    if (selectItem.label == "页面") {
        revoke.add(generateData.data, `删除【页面】的【${item.type}】事件中绑定的【${methodItem.methodName}】函数`)
    } else {
        revoke.add(generateData.data, `删除【${selectItem.name}】的【${item.type}】事件中绑定的【${methodItem.methodName}】函数`)
    }
}

/**
 * @method
 * @param {Object} eventItem 事件对象
 * @param {Object} methodItem 方法对象
 * @desc 编辑当前组件的对应事件的函数
 */
const editItemMethod = (eventItem, methodItem) => {

    console.log('editItemMethod:', eventItem)

    let selectItem;
    if (props.selectItem) {
        selectItem = props.selectItem;
    } else {
        selectItem = generateData.data;
    }
    scriptEditor.value.open(selectItem, eventItem, 'edit', methodItem.methodName);

    if (selectItem.label == "页面") {
        revoke.addHistory(generateData.data, `编辑【页面】组件的【${eventItem.type}】事件`)
    } else {
        revoke.addHistory(generateData.data, `编辑【${selectItem.name}】的【${eventItem.type}】事件`)
    }
}




</script>

<style lang="less" scoped>
.event-list {
    margin: 0;
    padding: 0;

    li {
        .event-list-item {
            list-style: none;
            padding: 8px 10px;
            background-color: #f9f9f9;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid var(--borderColor);

            .event-list-item-name {
                margin-right: 5px;
            }

            .event-list-item-desc {
                cursor: pointer;
                color: #a3a3a3;
            }
        }
    }
}
.item-method-list-wrap {
    padding: 0;

    .item-method-list {
        margin: 0;
        padding: 0;

        li {
            &:not(:last-child) .method-list-item {
                margin-bottom: 5px;
            }

            .method-list-item {
                margin: 5px 0;
                padding: 5px 10px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border: 1px solid var(--borderColor);

                .method-name {
                    width: 180px;
                    cursor: default;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }

                .action-btn {
                    cursor: pointer;
                    margin-left: 8px;
                    color: #a3a3a3;
                    &:hover {
                        color: var(--blackColor);
                    }
                }
            }
        }
    }
}
.ant-collapse {
    border: 0;
    border-radius: 0;
}
</style>../../componentManager.js